<template>
  <div class="register-page">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <!-- 手机号 -->
        <van-field
          v-model="form.phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          :rules="phoneRules"
        />

        <!-- 图形验证码 -->
        <van-field
          v-model="form.captcha"
          name="图形码"
          label="图形码"
          placeholder="请输入图形验证码"
          :rules="captchaRules"
        >
          <template #button>
            <img
              :src="captchaImageUrl"
              @click="refreshCaptcha"
              style="width: 80px; height: 30px; border: 1px solid #ccc;"
            />
          </template>
        </van-field>

        <!-- 短信验证码 -->
        <van-field
          v-model="form.code"
          name="验证码"
          label="验证码"
          placeholder="请输入短信验证码"
          :rules="codeRules"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendSmsCode">
              获取验证码
            </van-button>
          </template>
        </van-field>

        <!-- 设置密码 -->
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          label="设置密码"
          placeholder="请输入密码"
          :rules="passwordRules"
        />

        <!-- 企业名称 -->
        <van-field
          v-model="form.companyName"
          name="企业名称"
          label="企业名称"
          placeholder="请输入企业名称"
          :rules="companyRules"
        />

        <!-- 联系人姓名 -->
        <van-field
          v-model="form.contactName"
          name="联系人"
          label="联系人"
          placeholder="请输入联系人姓名"
          :rules="contactRules"
        />
      </van-cell-group>

      <!-- 注册按钮 -->
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          注册并登录
        </van-button>
      </div>

      <!-- 协议勾选 -->
      <div class="protocol">
        <van-checkbox v-model="checked" icon-size="16px" shape="square" />
        <span>我已阅读并同意</span>
        <span class="link">《注册协议》</span>
        <span>和</span>
        <span class="link">《隐私声明》</span>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import axios from 'axios'

// 表单字段
const form = reactive({
  phone: '',
  captcha: '',
  code: '',
  password: '',
  companyName: '',
  contactName: ''
})

const checked = ref(false)

// 验证规则
const phoneRules = ref([
  { required: true, pattern: /^1\d{10}$/, message: '请输入有效的手机号' }
])

const captchaRules = ref([
  { required: true, message: '请输入图形验证码' }
])

const codeRules = ref([
  { required: true, pattern: /^\d{4,6}$/, message: '请输入正确的验证码' }
])

const passwordRules = ref([
  { required: true, pattern: /^\w{6,20}$/, message: '密码长度为6~20个字符' }
])

const companyRules = ref([
  { required: true, message: '请输入企业名称' }
])

const contactRules = ref([
  { required: true, message: '请输入联系人姓名' }
])

// 图形验证码处理
const captchaImageUrl = ref('http://localhost:8080/captcha')

const refreshCaptcha = () => {
  captchaImageUrl.value = `http://localhost:8080/captcha?time=${Date.now()}`
}

// 短信验证码按钮（模拟）
const sendSmsCode = () => {
  if (!form.phone || !form.captcha) {
    showFailToast('请填写手机号和图形验证码')
    return
  }
  // 模拟发送
  showSuccessToast('验证码已发送（模拟）')
  // 后续你可以在这里调用后端接口：例如 axios.post('/send-code', {...})
}

// 提交表单
const onSubmit = async () => {
  if (!checked.value) {
    showFailToast('请先勾选注册协议和隐私声明')
    return
  }

  try {
    const response = await axios.post('http://localhost:8080/register', {
      phone: form.phone,
      password: form.password,
      code: form.code,
      captcha: form.captcha,
      company_name: form.companyName,
      contact_name: form.contactName
    })

    showSuccessToast('注册成功')
    console.log('注册成功：', response.data)
  } catch (error) {
    console.error('注册失败：', error)
    showFailToast('注册失败，请稍后再试')
  }
}
</script>

<style scoped>
.register-page {
  padding: 16px;
}
.protocol {
  display: flex;
  align-items: center;
  font-size: 13px;
  margin-top: 12px;
}
.protocol .link {
  color: #1989fa;
  margin: 0 2px;
}
</style>
